<template>
  <div id="page-sms-send">
    <h2>短信发送</h2>

    <card>
      <p>短信剩余条数：{{sms.surplus}}</p>
      <p>本月发送条数：{{sms.send}}</p>
    </card>

    <card class="mt20">
      <h3 class="tc">短信发送历史</h3>
      <div class="m20 clearfix">
        <router-link to="/finance/sms-send-send">
          <Button type="info" class="fr">短信发送</Button>
        </router-link>
      </div>
      <Table border :columns="columns" :data="list" class="mt20"></Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import financeApi from '@/api/finance'
  import smsSendModal from './components/sms-send/sms-send-modal'

  export default {
    name: 'page-sms-send',
    components: {
      smsSendModal
    },
    data () {
      return {
        loading: false,
        query: {
          pkRclubInfo: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '接收手机',
            key: 'recPhone',
            align: 'center'
          },
          {
            title: '发送内容',
            key: 'content',
            align: 'center'
          },
          {
            title: '发送类型',
            key: 'sendWayName',
            align: 'center'
          },
          {
            title: '发送时间',
            key: 'sendTime',
            render: (h, params) => {
              let { row } = params
              return moment(row.sendTime).format('YYYY-MM-DD HH:mm:ss')
            },
            align: 'center'
          },
          {
            title: '发送状态',
            width: 120,
            key: 'sendStatus',
            render: (h, params) => {
              let { row } = params
              if (row.sendStatus === 0) {
                return '成功'
              } else {
                return '失败'
              }
            },
            align: 'center'
          }
        ],
        sms: {
          surplus: 0, // 剩余条数
          total: 0, // 总条数
          send: 0 // 发送条数
        },
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getSendList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async detail () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await financeApi.smsRechargeInfo(this.query)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          let data = body.responseData.content[0]
          this.sms.surplus = data.surplusCount
          this.sms.total = data.totalCount
          this.sms.send = data.usedCount
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getSendList () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await financeApi.smsSendList(this.query)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.list = body.responseData.content
          this.page.total = body.responseData.totalElements
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async showSmsSendModal () {
        this.form.visible = true
      }
    },
    mounted () {
      this.detail()
      this.getSendList()
    }
  }
</script>
